<template>
  <!-- 手机端的呈现方式 -->
  <template v-if="appConfig.layout === $default.mobileLayout">
    <a-collapse :bordered="false" expandIconPosition="right">
      <template #expandIcon="{ isActive }">
        <IconFont type="CaretLeftOutlined" :rotate="isActive ? -90 : 0" />
      </template>
      <a-collapse-panel key="sider">
        <template #header>
          <IconFont type="PartitionOutlined" />  {{ sideTitle }}
        </template>
        <!-- 侧边部分 -->
        <slot name="sider"></slot>
      </a-collapse-panel>
    </a-collapse>
    <!-- 内容部分 -->
    <slot name="content"></slot>
  </template>
  <!-- PC端的呈现方式，左侧固定，定宽 -->
  <a-layout v-else-if="sideFixed" :style="{ height: `${contentHeight}px` }">
    <a-layout-sider breakpoint="lg"
                    :theme="contentTheme"
                    :collapsed="collapsed"
                    :collapsedWidth="collapsedWidth"
                    :collapsible="collapsible"
                    @collapse="handleCollapseToggle">
      <!-- 顶部内容 -->
      <div v-if="$slots.top" class="atom-sider-top"><slot name="top"></slot></div>
      <!-- 侧边部分 -->
      <div class="atom-sider-middle"><slot name="sider"></slot></div>
      <!-- 底部内容 -->
      <div v-if="$slots.bottom" class="atom-sider-bottom"><slot name="bottom"></slot></div>
    </a-layout-sider>
    <a-layout-content>
      <!-- 内容部分 -->
      <slot name="content"></slot>
    </a-layout-content>
  </a-layout>
  <!-- PC端的呈现方式，左侧不固定 -->
  <a-row :gutter="16" v-else>
    <a-col :xs="leftSpan.xs" :sm="leftSpan.sm" :md="leftSpan.md" :lg="leftSpan.lg" :xl="leftSpan.xl" :xxl="leftSpan.xxl">
      <!-- 侧边部分 -->
      <slot name="sider"></slot>
    </a-col>
    <a-col :xs="rightSpan.xs" :sm="rightSpan.sm" :md="rightSpan.md" :lg="rightSpan.lg" :xl="rightSpan.xl" :xxl="rightSpan.xxl">
      <!-- 内容部分 -->
      <slot name="content"></slot>
    </a-col>
  </a-row>
</template>

<script>
/**
 * 页面左右布局，正常模式下左右分隔，在device is mobile模式下，显示为右侧的drawer
 */
const defaultSide = { xs: 9, sm: 8, md: 7, lg: 6, xl: 5, xxl: 4 }
import config from '@/config/mixins/config'
export default {
  name: 'SideLayout',
  mixins: [config],
  props: {
    // 左侧边的布局
    side: {
      type: [Number, Object],
      default: () => { return defaultSide }
    },
    // 左侧sider的title，仅当为drawer展示模式时呈现，用于展开左侧筛选项
    sideTitle: {
      type: String,
      required: false
    },
    // 左侧是否固定
    sideFixed: {
      type: Boolean,
      default: false
    },
    // 当前是否收起状态
    collapsed: {
      type: Boolean,
      required: false
    },
    // 展开收起的宽度
    collapsedWidth: {
      type: Number,
      default: 48
    },
    // 是否显示展开收起按钮
    collapsible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 左侧span
    leftSpan () {
      if (Number.isInteger(this.side)) {
        return { xs: this.side, sm: this.side, md: this.side, lg: this.side, xl: this.side, xxl: this.side }
      } else {
        return Object.assign({}, defaultSide, this.side)
      }
    },
    // 右侧span
    rightSpan () {
      return {
        xs: (24 - this.leftSpan.xs) || 24,
        sm: (24 - this.leftSpan.sm) || 24,
        md: (24 - this.leftSpan.md) || 24,
        lg: (24 - this.leftSpan.lg) || 24,
        xl: (24 - this.leftSpan.xl) || 24,
        xxl: (24 - this.leftSpan.xxl) || 24
      }
    }
  },
  emits: ['sider-collapse'],
  methods: {
    // 响应收起展开
    handleCollapseToggle (collapsed) {
      this.$emit('sider-collapse', collapsed)
    }
  }
}
</script>

<style lang="less">
.ant-collapse.ant-collapse-borderless {
  .ant-collapse-item {
    border: none;
  }
}
.ant-layout.ant-layout-has-sider {
  .ant-layout-sider {
    .ant-layout-sider-children {
      display: flex;
      flex-direction: column;
      .atom-sider-top, .atom-sider-bottom {
        padding: 8px 16px;
        width: 100%;
        transition: all 0.2s;
        line-height: 32px;
      }
      .atom-sider-middle {
        flex: 1;
      }
    }
  }
  .ant-layout-content {
    margin-left: 16px;
  }
}
</style>
